﻿import QtQuick 2.8
import QtQuick.Controls 1.4
import QtGraphicalEffects 1.0

Item {
    Rectangle {
        id: root
        width: 200
        height: 300
        x: 100
        y: 200


    //这里是边框效果
        RectangularGlow {
            id: rectGlow
            visible: true
            anchors.fill: playerBack
            glowRadius: 20  //边框宽度
            spread: 0.1    //虚化程度(0~1)
            color: true ? "red" : "blue"  //颜色

            //z: -1
            cornerRadius: playerBack.radius + glowRadius
        }

        //武将背景
        Rectangle {
            id: playerBack
            //source: GlobalJS._FixPath_R("Media/System/photo-back.png")
            width: root.width
            height: root.height
            color: "#00000000"

            //Rectangle { //用来遮罩
            //    id: imagePlayerRect
                //width: Global.dpW(145)  //119*60
                //height: Global.dpH(71)
                //武将图片
                Image {
                    id: imagePlayer
                    anchors.fill: parent
                    source: "photo-back.png"
                }

        }

    }

    Slider {
        x: 100
        y: 0
        width: 200
        maximumValue : 20
        minimumValue : 0
        onValueChanged: {
            rectGlow.glowRadius = value;
        }
    }
    Slider {
        x: 100
        y: 50
        width: 200
        maximumValue : 1
        minimumValue : 0
        onValueChanged: {
            rectGlow.spread = value;
        }
    }

    Slider {
        x: 100
        y: 100
        width: 200
        maximumValue : 360
        minimumValue : 0
        onValueChanged: {
            rectGlow.cornerRadius = value;
        }
    }
    Component.onCompleted: {

    }
}


